<template>
	<div class="duoshangpin">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">直播推广</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/zhibotuiguang/duoshangpin' }">多商品页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">

          <div class="flex">
            <div style="margin-right: 20px;"><el-button @click="chuangjian" type="primary" round >发布商品</el-button></div>
          </div>

          <div style="margin-top: 20px;">

            <el-table :data="list" style="width: 100%">
              <el-table-column align="center" prop="sale_name" label="商品名称"></el-table-column>
              <el-table-column align="center" prop="pv" label="PV"></el-table-column>
              <el-table-column align="center" prop="uv" label="UV"></el-table-column>
              <el-table-column align="center" prop="saled" label="已销售"></el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <div class="flexcc">
                    <div @click="bianjishop(scope.row)" style="color: rgb(0, 90, 255); margin-right: 20px; cursor: pointer;">编辑</div>
                    <div @click="delbtn(scope.row)" style="color: rgb(0, 90, 255); cursor: pointer;">删除</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :page-size="search.page_size"
              @current-change = 'pagechange' :total="total"></el-pagination>
			  <!-- <footers></footers> -->
        </div>
      </div>
    </div>

    <!-- 修改备注名 -->
<!--    <el-dialog  title="根据已有直播页发布页面" :visible.sync="log" center :close-on-click-modal="false" width="500px">
      <div style="margin-bottom: 20px;">通过商品名称发布</div>
      <el-select v-model="all.produce_warning" style="width: 100%;" placeholder="请选生产交异常预警比例">
        <el-option  v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"> </el-option>
      </el-select>
      <div style="margin-top: 20px; text-align: center;">
        <el-button round @click="log = false">取 消</el-button>
        <el-button round type="primary" @click="fabu">确 定</el-button>
      </div>
    </el-dialog> -->

    <el-dialog  title="添加商品" :visible.sync="log2" center :close-on-click-modal="false" width="1000px">
      <div class="flex" style="margin-bottom: 20px;">
        <div style="margin-right: 30px;">
          <div style="margin-bottom: 10px;">商品名称</div>
          <div><el-input v-model="search2.title" placeholder="请输入直播页名称" ></el-input></div>
        </div>
        <div style="margin-right: 30px;">
          <div style="margin-bottom: 10px;">商品编码</div>
          <div><el-input v-model="search2.fetch_code" placeholder="请输入直播页名称" ></el-input></div>
        </div>
        <div><div style="height: 29px;"></div><el-button round type="primary" @click="getlist2">检索</el-button></div>
      </div>
      <div class="flexbc" style="background: rgb(255, 255, 255); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); border-radius: 20px; padding: 20px; margin-bottom: 20px;" v-for="item in list2" :key="item.id">
        <div class="flexc" style="width: 700px;">
          <div><img :src="item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 100px; height: 100px; margin-right: 20px;"></div>
          <div>
            <div style="color: rgb(2, 12, 29); font-size: 16px; font-weight: bold; margin-bottom: 10px;">{{item.title}}</div>
            <div style="color: rgb(113, 115, 117); margin-bottom: 10px;">编码：{{item.fetch_code}}</div>
            <div style="color: rgb(175, 179, 188);">创建时间：{{item.created_at}}</div>
          </div>
        </div>
        <div><el-button round type="primary" plain @click="tianjiashop(item)">添加商品 +</el-button></div>
      </div>
    </el-dialog>


    <div v-if="shoujiban" style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; padding-top: 1rem;">
      <topandleft></topandleft>
      <div style="background: #fff; padding: 0.3rem;">
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="width: 2px; height: 0.2rem; background: rgb(2, 12, 29); margin-right: 10px; overflow: hidden;"></div>
          <div style="font-size: 0.36rem; font-weight: bold;">直播推广</div>
        </div>
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="color: rgb(175, 179, 188);">首页</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div style="color: rgb(175, 179, 188);">直播推广</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div>多商品列表</div>
        </div>
      </div>
      <div style="padding: 0.3rem;">
        <div class="flex">
          <div style="margin-bottom: 0.2rem; "><el-button @click="chuangjian" type="primary" round >发布商品</el-button></div>
        </div>
        <van-list  v-model="loading"  :finished="finished"  finished-text="没有更多了"  @load="onLoad">
            <div v-for="item in list" :key="item.id" style="background: #fff; padding: 0.2rem; margin-bottom: 0.2rem; border-radius: 0.2rem;">

              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>商品名称</div>
                <div>{{item.sale_name}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>PV</div>
                <div>{{item.pv}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>UV</div>
                <div>{{item.uv}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>已销售</div>
                <div>{{item.saled}}</div>
              </div>

              <div class="flexc">
                <div @click="bianjishop(item)" style="color: rgb(0, 90, 255);  margin-right: 20px; cursor: pointer;">编辑</div>
                <div @click="delbtn(item)" style="color: rgb(0, 90, 255); cursor: pointer;">删除</div>
              </div>

            </div>
        </van-list>
      </div>
    </div>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
	export default {
		name: 'duoshangpin',
    components:{
      left,top,topandleft,footers
    },
		data() {
			return {
        all:{
          flow_id:this.$route.query.id,
          page_id:""
        },
        log:false,
        log2:false,
        search2:{
          page:1,
          page_size:20,
          status:100,
          title:"",
          selling_point:"",
          order:"",
          fetch_code:""
        },
        search:{
          page:1,
          page_size:20,
          tab:this.$route.query.id
        },
        total:0,
        list:[],
        list2:[],
        shoujiban:false,
        loading: false,
        finished: false,
			}
		},
		created() {
      //列表
      this.getlist2()
      // this.getlist()
		},
		mounted() {
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;

        // this.onLoad()
      }else{
        this.getlist()
      }
		},
		methods: {
      onLoad() {
        axios.get('/own/fpage/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.data.length > 0){
              response.data.data.data.forEach(item=>{
                this.list.push(item)
              })

              if (this.list.length >= response.data.data.total) {
                this.finished = true;

              }else{
                this.search.page++
                this.loading = false;
              }
            }

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      chuangjian:function(){
        this.all = {
          flow_id:this.$route.query.id,
          page_id:"",
        }
        this.log2 = true
      },
      tianjiashop:function(item){
        this.$router.push({
          path:"/zhibotuiguang/shangpinfabu",
          query:{
            flow_id:this.$route.query.id,
            page_id:item.id,
            type:'add'
          }
        })
      },
      bianjishop:function(item){
        this.$router.push({
          path:"/zhibotuiguang/shangpinfabu",
          query:{
            id:item.id,
            type:'fix'
          }
        })
      },
      getlist:function(){
        axios.get('/own/fpage/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data
            this.total = response.data.data.total
            this.loading = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //列表
      getlist2:function(){
        axios.get('/own/page/list',{params:this.search2}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list2 = response.data.data.data
            this.loading = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //分页
      pagechange(val){
        console.log(val)
        this.search.page = val
        //列表
        this.getlist()
      },
      //搜索
      searchbtn(){
        this.search.page = 1
        this.getlist()
      },
      //删除
      delbtn(item){
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/own/fpage/delete',{
            id:item.id
          }).then((response)=>{
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
		}
	}
</script>


<style scoped >
 .t_over_text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 40px);
 }
</style>
